
<style>
  .template_suff_kik-Academy .site-header-v2 .logo img.as-logo-other-pc{
    opacity:1;
  }
  body.page\.kik-Academy-template.template_suff_kik-Academy {
    overflow-x: hidden;
  }
  .rk-top-nav {
    position: sticky!important;
      top: 58px!important;
    z-index: 1000;
    background: #fff;
  }
  .rk-side-tabs {
    position: sticky;
    top: 80px; 
    align-self: flex-start;
    z-index: 10;
  }
  .right-sidebar {
    position: sticky;
    top: 111px!important;
    align-self: flex-start;
    z-index: 10;
  }
  .custom_video {
    width: 100%;
    /* max-width: 96%; */
}
  .search-wrapper {
    position: relative;
    width: 100%;
    max-width: 365px;
    margin: 10px auto;
  }
  .search-wrapper.desktop-hide {
    display: none;
  }
  .search-wrapper input {
    width: 100%;
    padding: 11px 40px 10px 33px;
    border: 1px solid #fbfbfb;
    font-size: 14px;
    box-sizing: border-box;
    background: #F7F8F9;
    border-radius: 4px;
    border: 1px solid #F7F8F9;
  }
  .search-wrapper input:focus{
    border: none;
  }
  .search-wrapper.lg-sarch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 342px;
    margin: 10px 0 10px auto;
  }
  .search-wrapper .fa-search {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-45%);
    color: #666;
    pointer-events: none;
    font-size: 13px;
  }
  div#shopify-section-template--18775946395827__kik_rokid_tab_GTFFcE {
    background: #FBFBFB;
  }
  .main-rokid-sect {
    max-width: 100%;
    margin: 0 50px;
    background:#FBFBFB;
    padding-top:24px;
  }
  .rk-top-nav {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    background: #fff;
    border: 1px solid #ffffff;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: 11px;
    padding: 0 20px;
    height: 60px;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    justify-content: space-between;
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
    border-radius: 6px;
  }
  a.rk-top-tab {
    text-decoration: none;
    padding: 10px 18px;
    margin-right: 10px;
    font-size: 16px;
    color: #5D5E5F;
    border-radius: 6px;
    cursor: pointer;
    font-family: HarmonyOS Sans, sans-serif;
    font-weight: 700;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    padding-bottom: 6px;
  }
  a.rk-top-tab:hover {
    color: #007aff;
    font-weight: 600;
  }
  a.rk-top-tab.active {
    font-weight: bold;
    color: #007aff;
  }
  .rk-top-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    top:50px;
    transform: translateX(-50%);
    height: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease, width 0.3s ease;
    width: 30px;
    height: 4px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .rk-top-tab:hover::after,
  .rk-top-tab.active::after {
    background-color: #007aff;
  }
  .right-sidebar h3 {
    display: none;
  }
  .rk-inner-wrapper{
    display:flex;
    padding-top:20px;
  }
  .rk-side-tabs {
    width: 33%;
    float: left;
    padding-top: 20px;
    margin-right: 20px;
    top:110px;
  }
  ul.cover_list_title:before{
    content: '';
    display: block;
    position: absolute;
    background: #E5E5E5;
    top: 3px;
    left: 1px;
    width: 1px;
    height: 433px;
    border-radius: 100px;
  }
  .rk-side-tab {
    position: relative;
    display: block;
    margin-bottom: 10px;
    padding: 10px 14px;
    font-size: 17px;
    font-family: HarmonyOS Sans, sans-serif;
    font-weight: 400;
    color: black;
    border-radius: 6px;
    line-height: 1.3;
    border: 1px solid black;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .rk-side-tab.active {
    background: #007aff!important;
    color: white;
    border: 2px solid #007aff;
  }
  .rk-side-tab::before,
  .rk-side-tab.active::before {
    background-color: white;
  }
  .rk-side-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 26px;
    background-color: transparent;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: background-color 0.3s ease;
  }
  .rk-tab-content {
    width: 80%;
    float: left;
    padding:20px;
    box-sizing: border-box;
  }
  .rk-tab-content > div {
    display: none;
  }
  .img-tab {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    display: block;
  }
  .rk-inner-wrapper::after {
    content: "";
    display: table;
    clear: both;
  }
  .rk-midle {
    display: flex;
    background:#fff;
    border-radius:12px;
  }
  .right-sidebar {
    float: right;
    width: 200px;
    padding: 20px;
    font-size: 14px;
    position: sticky;
    top: 15px;
    box-sizing: border-box;
    margin-left: 0;
    padding-left: 0;
  }
  .right-sidebar.hidden {
    display: none;
  }
  .right-sidebar h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 18px;
  }
  .right-sidebar ul {
    list-style: none;
    padding: 0 20px;
    margin: 0;
  }
  .right-sidebar a {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    text-decoration: none;
    color: #444;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  .right-sidebar a.active-link {
    color: #007aff!important;
    font-weight: bold;
    text-decoration: underline;
  }
  .right-sidebar a:hover {
    color: #007aff;
  }
  @media (max-width: 1024px) {
    select.mobile-side-tabs-dropdown {
      border: 1px solid #353535;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M98 190a24 24 0 0 1 34 0l124 124 124-124a24 24 0 0 1 34 34L272 370a24 24 0 0 1-34 0L98 224a24 24 0 0 1 0-34z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 16px;
    }
    div#shopify-section-template--18775946395827__kik_rokid_tab_GTFFcE{
      background:#fff;
    }
    .rk-top-nav {
      position: static!important;
      top: 0px;
      justify-content:flex-start;
    }
    .main-rokid-sect{
      max-width: 100%;
      margin: 0px;
      background:#FBFBFB;
      padding-top:14px;
    }
    .rk-top-tab:hover::after, .rk-top-tab.active::after{
      display:none;
    }
    .rk-inner-wrapper {
      display: block;
    }
    .search-wrapper.desktop-hide {
      display: block;
      max-width: 90%;
    }
    .search-wrapper.mobile-hide {
      display: none;
    }
    .rk-top-nav {
      flex-direction: row;
      overflow-x: auto;
      white-space: nowrap;
      padding: 10px;
      height: auto;
      align-items: center;
    }
    a.rk-top-tab {
      border: 1px solid black;
      padding: 6px 12px;
      margin-right: 8px;
      font-size: 14px;
      padding-top: 10px;
      padding-right: 16px;
      padding-bottom: 10px;
      padding-left: 16px;
      border-radius: 6px;
    }
    .rk-side-tabs,
    .rk-tab-content,
    .right-sidebar {
      float: none;
      width: 100%;
      margin: 0 0 20px 0;
    }
    .rk-midle {
      flex-direction: column;
    }
    .right-sidebar {
      position: relative;
      top: auto;
      max-height: none;
      padding: 10px 5px;
      width: 100%;
      margin-left: 0;
    }
    .img-tab {
      width: 100%;
      height: auto;
    }
  }
</style>
  
  <div class="main-rokid-sect">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
      <!-- Search Bar for Mobile -->
      <div class="search-wrapper desktop-hide">
      <i class="fas fa-search"></i>
         <input 
                type="text" 
                name="q" 
                autocomplete="off" 
                autofocus
                value=""
                readonly
                class="form-control as-search-input pe-6" 
                data-bs-toggle="modal"
                data-bs-target="#Search_Modal"
                placeholder="{{ 'sections.custom_search.placeholder' | t }}" 
                aria-label="{{ 'sections.custom_search.placeholder' | t }}">
      </div>
      <!-- Top Navigation Tabs -->
      <div class="rk-top-nav">
         {% assign index = 1 %}
         {% for block in section.blocks %}
         {% if block.type == 'top_tab' %}
         <a
            href="#"
            class="rk-top-tab{% if forloop.first %} active{% endif %}"
            data-parenttab="{{ block.settings.top_tab_title |  handleize }}"
            data-tab="tab{{ index }}"
            >{{ block.settings.top_tab_title }}</a
            >
         {% assign index = index | plus: 1 %}
         {% endif %}
         {% endfor %}
         <!-- Search Bar for Desktop -->
         <div class="search-wrapper lg-sarch mobile-hide"> 
              <i class="fas fa-search"></i>  
              <input 
                type="text" 
                name="q" 
                autocomplete="off" 
                autofocus
                value=""
                readonly
                class="form-control as-search-input pe-6" 
                data-bs-toggle="modal"
                data-bs-target="#Search_Modal"
                placeholder="{{ 'sections.custom_search.placeholder' | t }}" 
                aria-label="{{ 'sections.custom_search.placeholder' | t }}"
              >
         </div>   
         <div
         class="modal fade modal-lg"
         id="Search_Modal"
         tabindex="-1"
         aria-labelledby="Search_Modal"
         aria-hidden="true"
       >
       <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content p-3 position-relative">
           <span class="position-absolute modal-close cursor-pointer" data-bs-dismiss="modal" aria-label="Close">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect width="24" height="24" fill="white" style="mix-blend-mode:multiply"/>
               <path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM16.05 17.25L12 13.2L7.95 17.25L6.75 16.05L10.8 12L6.75 7.95L7.95 6.75L12 10.8L16.05 6.75L17.25 7.95L13.2 12L17.25 16.05L16.05 17.25Z" fill="black" fill-opacity="0.4"/>
             </svg>
           </span>
           <div class="modal-body">
              <form id="search-form-modal" action="{{ routes.search_url }}" method="get" role="search" class="search-form as-predictive-search-form w-100">
                <i class="fas fa-search"></i> 
                <input 
                            type="text" 
                  name="q" 
                  autocomplete="off" 
                  autofocus
                  value=""
                  class="form-control as-search-input pe-6" 
                  placeholder="{{ 'sections.custom_search.placeholder' | t }}" 
                  aria-label="{{ 'sections.custom_search.placeholder' | t }}"
                  >
                <input type="hidden" name="type" value="article,product,page"/>
                <input name="options[prefix]" type="hidden" value="last">
              </form>
              <div class="search_content"></div>
           </div>
         </div>
       </div>
     </div>     
      </div>
      <!-- Content area where tab content is loaded -->
      <div class="rk-content-area hidden" id="rk-content-area"></div>
      <div id="tab-contents" style="display:none;">
         {% assign tab_index = 1 %}
         {% for block in section.blocks %}
         {% if block.type == 'top_tab' %}
         <div id="tab{{ tab_index }}">
            <div class="rk-inner-wrapper">
               <div class="rk-side-tabs active">
                  {% for sub_block in section.blocks %}
                  {% if sub_block.type == 'side_tab' and sub_block.settings.parent_tab == block.settings.top_tab_title %}
                  <a
                     href="#"
                     class="rk-side-tab"
                     data-parentid="{{ sub_block.settings.parent_tab | handleize }}"
                     data-tab="panel-{{ sub_block.id }}"
                     data-sidebar="{{ sub_block.settings.sidebar_links | escape }}"
                     data-title="{{ sub_block.settings.side_tab_title | handleize }}"
                     >{{ sub_block.settings.side_tab_title }}</a
                     >
                  {% endif %}
                  {% endfor %}
               </div>
               <div class="rk-midle" style="width: 100%;">
                  <div class="rk-tab-content" data-tabparent="{{ block.settings.parent_tab }}">
                     {% for sub_block in section.blocks %}
                     {% if sub_block.type == 'side_tab' and sub_block.settings.parent_tab == block.settings.top_tab_title %}
                     <div class="side_content_inner" id="panel-{{ sub_block.id }}" data-sideparent="{{ sub_block.settings.side_tab_title | handleize }}" data-topparentmain="{{sub_block.settings.parent_tab | handleize }}" style="display:none;">
                        {% if sub_block.settings.image != blank %}
                        <img
                           class="img-tab"
                           src="{{ sub_block.settings.image | image_url: width: 800 }}"
                           alt="{{ sub_block.settings.side_tab_title }}"
                           loading="lazy"
                           />
                        {% endif %}
                    {% if sub_block.settings.video_link != blank %}
                      <video
                          autoplay
                          loop
                          muted
                          playsinline
                          webkit-playsinline
                          preload="metadata"
                          loading="lazy"
                          class="custom_video"
                        >
                      <source src="{{ sub_block.settings.video_link | replace: '.mp4', '.webm' }}" type="video/webm">
                      <source src="{{ sub_block.settings.video_link }}" type="video/mp4">
                    </video>
                  {% endif %}
                  <div style="text-align: {{ sub_block.settings.text_alignment }};">
                      {% if sub_block.settings.page_content != blank %}
                        {%  assign page_content = pages[sub_block.settings.page_content] %}
                        {{ page_content.content }}
                      {% elsif sub_block.settings.selected_article != blank %}
                        {% assign article = articles[sub_block.settings.selected_article] %}
                        {{ article.content }}
                      {% else %}
                        {{ sub_block.settings.side_tab_content 
                          | replace: '<h1', '<h2'
                          | replace: '</h1>', '</h2>'
                          | replace: '<h4', '<h3'
                          | replace: '</h4>', '</h3>'
                          | replace: '<h5', '<h3'
                          | replace: '</h5>', '</h3>'
                          | replace: '<h6', '<h3'
                          | replace: '</h6>', '</h3>'
                          | raw
                        }}
                      {% endif %}
                      </div>
                     </div>
                     {% endif %}
                     {% endfor %}
                  </div>
                  <div class="right-sidebar mobile-hidden"></div>
               </div>
            </div>
         </div>
         {% assign tab_index = tab_index | plus: 1 %}
         {% endif %}
         {% endfor %}
      </div>
    </div>
<style>
</style>
 <script>
  function handleize(str) {
    return str
      .toLowerCase()                   
      .replace(/[^a-z0-9\s-]/g, '')        
      .replace(/\s+/g, '-')                
      .replace(/-+/g, '-')                 
      .replace(/^-|-$/g, '');
  }
  document.addEventListener("DOMContentLoaded", function () {
    const rkTopTabs = document.querySelectorAll(".rk-top-tab");
    const rkContentArea = document.getElementById("rk-content-area");
    function loadTab(tabId) {
      const tabContent = document.getElementById(tabId);
      if (tabContent) {
        rkContentArea.innerHTML = tabContent.innerHTML;
        const sideTabs = rkContentArea.querySelectorAll(".rk-side-tab");
        const contentBlocks = rkContentArea.querySelectorAll(".rk-tab-content > div");
        const rightSidebar = rkContentArea.querySelector(".right-sidebar");
        const oldDropdown = rkContentArea.querySelector(".mobile-side-tabs-dropdown");
        if (oldDropdown) oldDropdown.remove();
        const dropdown = document.createElement("select");
        dropdown.className = "mobile-side-tabs-dropdown";
        dropdown.style.width = "95%";
        dropdown.style.margin = "0 auto";
        dropdown.style.padding = "16px";
        dropdown.style.fontSize = "16px";
        dropdown.style.borderRadius = "6px";
        dropdown.style.border = "1px solid #ccc";
        dropdown.style.display = "block";
        if (sideTabs.length === 0) {
          const placeholder = document.createElement("option");
          placeholder.textContent = "Select an option";
          placeholder.value = "";
          dropdown.appendChild(placeholder);
        }
        sideTabs.forEach(tab => {
          const option = document.createElement("option");
          option.value = tab.getAttribute("data-tab");
          option.textContent = tab.textContent.trim();
          dropdown.appendChild(option);
        });
        const sideTabsContainer = rkContentArea.querySelector(".rk-side-tabs");
        sideTabsContainer.parentNode.insertBefore(dropdown, sideTabsContainer);
        dropdown.addEventListener("change", function () {
          const selectedId = this.value;
          if (!selectedId) return;
          sideTabs.forEach(tab => {
            if (tab.getAttribute("data-tab") === selectedId) {
              tab.click();
              dropdown.value = selectedId;
            }
          });
        });
        sideTabs.forEach((tab, index) => {
          tab.addEventListener("click", function (e) {
            e.preventDefault();
            sideTabs.forEach(t => t.classList.remove("active"));
            this.classList.add("active");
            dropdown.value = this.getAttribute("data-tab");
            const targetId = this.getAttribute("data-tab");
            const tabTitle = this.getAttribute("data-title");
            contentBlocks.forEach(block => {
              block.style.display = block.id === targetId ? "block" : "none";
            });
            if (rightSidebar) {
              rightSidebar.innerHTML = `<h3>${tabTitle}</h3>`;
              rightSidebar.classList.remove("hidden");
              const sidebarLinksHTML = this.getAttribute("data-sidebar");
              if (sidebarLinksHTML) {
                rightSidebar.innerHTML += sidebarLinksHTML;
              }
              const currentContent = rkContentArea.querySelector(`#${targetId}`);
              if (currentContent) {
                const headings = Array.from(currentContent.querySelectorAll("h2, h3")).filter(
                  heading => !heading.closest(".rk-side-tabs")
                );
                if (headings.length > 0) {
                  const list = document.createElement("ul");
                  list.classList.add("cover_list_title");
                  list.style.listStyle = "none";
                  list.style.padding = "0px 0 0 20px";
                  headings.forEach((heading, i) => {
                    if (heading.textContent.trim() === tabTitle.trim()) return;
                    const id = `section-${index}-${i}`;
                    heading.id = id;
                    var link_handle = handleize(heading.textContent)
                    const link = document.createElement("a");
                    link.href = `#${id}`;
                    link.textContent = heading.textContent;
                    link.style.display = "block";
                    link.style.marginBottom = "8px";
                    link.style.fontSize = "14px";
                    link.style.textDecoration = "none";
                    link.style.color = "#444";
                    link.classList.add('content_hading_link')
                    link.setAttribute('data-linkcontent',link_handle)
                    link.addEventListener("click", e => {
                      e.preventDefault();
                      document.querySelectorAll(".right-sidebar a").forEach(a => a.classList.remove("active-link"));
                      link.classList.add("active-link");
                      document.getElementById(id).scrollIntoView({ behavior: "smooth" });
                    });
                    list.appendChild(link);
                  });
                  rightSidebar.appendChild(list);
                  const firstLink = list.querySelector("a");
                  if (firstLink) {
                    firstLink.classList.add("active-link");
                  }
                  const observerOptions = {
                    root: null, // use full page scroll
                    rootMargin: "0px 0px -80% 0px",
                    threshold: 0
                  };
                  const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                      const id = entry.target.getAttribute("id");
                      if (entry.isIntersecting && id) {
                        const activeLink = rightSidebar.querySelector(`a[href="#${id}"]`);
                        if (activeLink) {
                          rightSidebar.querySelectorAll("a").forEach(a => a.classList.remove("active-link"));
                          activeLink.classList.add("active-link");
                        }
                      }
                    });
                  }, observerOptions);

                  headings.forEach(heading => {
                    if (heading.id) observer.observe(heading);
                  });
                }
              }
            }
          });
        });
        if (sideTabs.length > 0) {
          sideTabs[0].click();
          dropdown.value = sideTabs[0].getAttribute("data-tab");
        }
      }
    }
    rkTopTabs.forEach(tab => {
      tab.addEventListener("click", function (e) {
        e.preventDefault();
        rkTopTabs.forEach(t => t.classList.remove("active"));
        this.classList.add("active");
        const tabId = this.getAttribute("data-tab");
        loadTab(tabId);
      });
    });
    loadTab("tab1");
  });

document.addEventListener("DOMContentLoaded", function () {
  $('.template_suff_kik-Academy #search-form-modal input').on('input', function (e) {
    const resultsContainer = document.querySelector(".search_content");
    const rkTabContents = document.querySelectorAll(".rk-tab-content"); // Get all tab content containers
    const query = $(this).val().trim().toLowerCase();
    resultsContainer.innerHTML = "";
    if (!query) return;
    let matchFound = false;
    rkTabContents.forEach(rkTabContent => {
      const headings = rkTabContent.querySelectorAll("h2, h3");
      headings.forEach(heading => {
        const text = heading.innerText.toLowerCase();
        var top_tab_data = heading.closest('.side_content_inner').getAttribute('data-topparentmain');
        var parent_name = document.querySelector('.rk-top-nav .rk-top-tab[data-parenttab="'+top_tab_data+'"]').innerText;
        if (text.includes(query)) {
          matchFound = true;
          const resultText = heading.innerText+'-'+parent_name;
          // Check for duplicates before appending
          const isDuplicate = Array.from(resultsContainer.children).some(child => child.innerText === resultText);
          if (!isDuplicate) {
            const resultItem = document.createElement("div");
            resultItem.className = "search-result-item";
            resultItem.style.cursor = "pointer";
            resultItem.style.padding = "5px 0";
            resultItem.style.borderBottom = "1px solid #ccc";
            resultItem.innerText = resultText;
            resultItem._rkTabContent = rkTabContent;
            resultItem._heading = heading;
            resultItem.addEventListener("click", function () {
              $('#Search_Modal .modal-close').click();
              $('.template_suff_kik-Academy #search-form-modal input').val(''); // Clear search input
              resultsContainer.innerHTML = ""; // Clear search results
              setTimeout(() => {
                const h = this._heading;
                var head_handle = handleize(h.textContent);
                console.log(head_handle);
                var parent_tab = h.closest('.side_content_inner').getAttribute('data-topparentmain');
                var sideparent = h.closest('.side_content_inner').getAttribute('data-sideparent');
                const parent_tabtriger = document.querySelector('.rk-top-nav .rk-top-tab[data-parenttab="'+parent_tab+'"]');
                if (parent_tabtriger) {
                  parent_tabtriger.scrollIntoView();
                  parent_tabtriger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
                }
                setTimeout(function(e){
                  $('.rk-side-tabs').each(function(e){
                    const sideparent_tabtriger = $(this).find('.rk-side-tab[data-parentid="'+parent_tab+'\"][data-title="'+sideparent+'"]');
                    if (sideparent_tabtriger) {
                      sideparent_tabtriger.scrollIntoView();
                      sideparent_tabtriger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
                    }
                    setTimeout(function(e){
                      const content_trigger = $('.cover_list_title .content_hading_link[data-linkcontent="'+head_handle+'"]');
                      if (content_trigger) {
                        content_trigger.scrollIntoView();
                        content_trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));
                      }
                    },200)
                  })
                },100)              
              }, 500);
            });
            resultsContainer.appendChild(resultItem);
          }
        }
      });
    });
    if (!matchFound) {
      resultsContainer.innerHTML = `<div>No match found related to your search.</div>`;
    }
  });
});
</script>
<style>
  html body .kik-rokid-tab{
    background:#FBFBFB;
  }
  .right-sidebar a.active-link {
    position: relative;
    color: #007bff !important;
  }
  .right-sidebar a.active-link::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 10px;
    background-color: #007bff;
    border-radius: 2px;
    overflow-y:auto;
    width: 3px;
    height: 14px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
  }
  .mobile-side-tabs-dropdown {
    display: none!important;
  }
  .template_suff_kik-Academy.modal-open .modal{
    background: rgba(0, 0, 0, 0.6);
  }
  .template_suff_kik-Academy.modal-open .modal .modal-dialog{
    display: flex;
    align-items: center;
  }
  .template_suff_kik-Academy.modal-open .modal .modal-dialog .modal-content .modal-close{
    left: auto;
    right: 16px;
    z-index: 99;
  }
  .template_suff_kik-Academy.modal-open .modal .modal-dialog .modal-content .modal-body{
    padding: 0;
    padding-top: 30px;
  }
  .template_suff_kik-Academy #search-form-modal{
    display: flex;
    position: relative;
  }
  .template_suff_kik-Academy #search-form-modal input[type="text"]{
    width: 100%;
    padding: 11px 40px 10px 33px;
    font-size: 14px;
    box-sizing: border-box;
    background: #F7F8F9;
    border-radius: 4px;
    border: 1px solid #F7F8F9;
  }
  .template_suff_kik-Academy #search-form-modal .fa-search{
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 13px;
  }
  @media (max-width: 1024px) {
    html body .kik-rokid-tab .rk-content-area .rk-inner-wrapper .mobile-side-tabs-dropdown{
      width: calc(100% - 32px) !important;
      position: sticky;
      top: 75px;
      color:#000;
    }
    a.rk-top-tab.active {
      font-weight: bold;
      color: #ffffff;
      background: #007AFF;
      border: 1px solid #007AFF;
    }
    .right-sidebar.mobile-hidden {
      display: none;
     }
    .mobile-side-tabs-dropdown {
     display: block !important;
    }
    .rk-side-tabs {
    display: none;
    }
  }
</style>
{% schema %}
{
  "name": "Rokid Tab",
  "class": "kik-rokid-tab",
  "settings": [],
  "blocks": [
    {
      "type": "top_tab",
      "name": "Top Tab",
      "settings": [
        {
          "type": "text",
          "id": "top_tab_title",
          "label": "Top Tab Title"
        }
      ]
    },
    {
      "type": "side_tab",
      "name": "Side Tab",
      "settings": [
        {
          "type": "text",
          "id": "parent_tab",
          "label": "Parent Top Tab Title (must match)"
        },
        {
          "type": "text",
          "id": "side_tab_title",
          "label": "Side Tab Title"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "video_link",
          "label": "Video Link",
          "info": "This only can add cdn video link"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text Alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "left"
        },
        {
          "type": "page",
          "id": "page_content",
          "label": "Select page need to show content",
          "info": "Select page that conettn will show related tab content"
        },
        {
          "type": "article",
          "id": "selected_article",
          "label": "Optional Article",
          "info": "If an article is selected, its content will replace the custom text below."
        },
        {
          "type": "richtext",
          "id": "side_tab_content",
          "label": "Side Tab Content",
          "info": "Used only if no article is selected. Supports headings (H2, H3), bold, paragraphs, lists."
        }
      ]
    }
  ],
  "presets": [
    {
    "name": "Rokid Tabbed Interface"
    }
  ]
}
{% endschema %}